<template>
	<view class="oa-notice-detail">

		<view class="input-title">
			<text>{{task.name}}</text>
		</view>

		<view class="feedback-title">
			<text>添加我的落实情况</text>


		</view>
		<view class="feedback-body">
			<textarea placeholder="请详细描述您的落实情况..." style="height: 30vh;" v-model="content" class="feedback-textare" />
		</view>

		<view class="padding  addimgitem">
			<block v-for="(itemimg, index) in imgarr" :key="index">
				<view style="width: 33%;text-align: center;margin-top: 20rpx;float: left;">
					<image :src="itemimg" class="addimg" mode="" @click="previewImg(index)"></image>
					<image src="/static/x1.png" mode="" class="delimg" @click="delImage(index)"></image>
				</view>
			</block>
			<view style="width: 33%;float: left;text-align: center;margin-top: 20rpx;">
				<image src="/static/addimg.png" class="addimg" mode="" @click="ChooseImage"></image>
			</view>
		</view>

		<button class="confirm-btn" :class="'bg-' + themeColor.name" @tap="send">
			提交落实情况
		</button>
		<!--加载动画-->
	</view>
</template>

<script>
	import Api from '@/utils/api.js';
	import config from '@/utils/config.js';
	export default {

		data() {
			return {
				task: {},
				content: "",
				id: "",

				imgarr: [],
				imgarrUrl: [],
			};
		},
		onShow() {

		},
		onLoad(event) {
			this.id = event.id
			this.initData(event.id);
			
			// Api.updateVersion({
			// }).then(infos => {
			// 	console.log(JSON.stringify(infos));
			// });
		},
		methods: {
			send() {
				let user = uni.getStorageSync('user');
				let that = this;
debugger
				uni.request({
					method: 'POST',
					url: 'http://nmt.yunshangwulian.vip/api/actions',
					data: {
						'api_token': user.api_token,
						'task_id': this.id,
						'location': that.location,
						'user_id': user.id,
						'type': 'text',
						'content': that.content,
                        'images':that.imgarrUrl,
						'location': that.location || "内蒙古万锦香韵小区",
					},
					header: {
						'Accept': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 201) {
							that.task = res.data
							this.$mHelper.toast('提交成功');
                            uni.navigateBack({
                                 delta: 1
                            });
						} else {
							this.$mHelper.toast('提交错误');
						}
					}
				});
			},
			initData(id) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
				let user = uni.getStorageSync('user');
				let that = this;
				uni.request({
					method: 'GET',
					url: 'http://nmt.yunshangwulian.vip/api/tasks/' + id,
					data: {
						'api_token': user.api_token,
						'task_id': id,
						'location': that.location || "内蒙古万锦香韵小区",
						'user_id': user.id,
						'type': 'text',
						'content': that.content

					},
					header: {
						'Accept': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 200) {

							that.task = res.data


						} else {
							this.$mHelper.toast('提交错误');
						}

					}
				});


			},
			// 快速输入
			chooseMsg() {
				uni.showActionSheet({
					itemList: this.msgContents,
					success: res => {
						this.sendDate.suggest = this.msgContents[res.tapIndex];
					}
				});
			},

			async handleWorksOperation(status) {
				this.$mHelper.toast('操作成功');
				this.$mRouter.pop()
			},
			
			//上传图片
			ChooseImage( ) {
				let self = this;
				uni.chooseImage({
					count: 1, //可选择数量，默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择或从使用相机
					success: async (res) => { 
						console.log("图片压缩前大小：" + res.tempFiles[0].size);
						// 上传图片到服务器
						self.uploadFile(res.tempFilePaths[0])   
						//上传图片大小限制
						// if (res.tempFiles[0].size > 1 * 1024 * 1000) {  //上传图片大小限制
						// 	uni.showToast({
						// 		title: "照片大小不能超过1MB",
						// 		icon: "none"
						// 	});
						// 	return;
						// }
						// uni.getImageInfo({
						// 	src: res.tempFilePaths[0],
						// 	success: function (image) {
						// 		console.log(image.width);
						// 		console.log(image.height);
						// 		if( image.width != 350 && image.height != 530){
						// 			uni.showToast({
						// 				title: "图片大小尺寸必须为350*530",
						// 				icon: "none"
						// 			});
						// 		}else{
						// 			self.imgarr.push( res.tempFilePaths[0] );
						// 		}
						// 	}
						// });
					}
				});
			},
			// 删除图片
			delImage(index){
				console.log( index);
				this.imgarr.splice(index, 1)
			},
			// 预览图片
			previewImg( index ) {
			    uni.setStorageSync("currentImgIndex",index)    // 当前下标
			    uni.setStorageSync('imgPreviewPicList', this.imgarr)  // 当前数组
			    uni.navigateTo({
			        url: '/pages/works/imgPreview'             // 要跳转的预览页
			    })
			},
			
			//上传图片
			async uploadFile( image ){
				let that = this;
				uni.showLoading({
					mask:true,
					title: '上传中...'
				})
				var _img = image;
				// #ifdef APP-PLUS
				// await--上传图片之前先压缩，否则上传会比压缩先执行
				_img = await this.compress( image );
				// #endif
				
				this.imgarr.push(_img);
				let user = uni.getStorageSync('user');
				//开始上传，此处可先注释看压缩效果
				uni.uploadFile({
					url: "http://nmt.yunshangwulian.vip/api/users/image", //仅为示例，此处填写后台的上传图片接口地址
					filePath: _img,
					header: {
						'Accept': 'application/json' ,//自定义请求头信息
					},
					name: 'image',
					formData: {
					    'api_token': user.api_token
					},
					success: (uploadFileRes) => {        //图片上传成功
                   // let uploadFileRes=uploadFileRes.parseJSON();
						uni.hideLoading()
						console.log("@@@@@@@@"+ JSON.parse(uploadFileRes.data) )
                        
                        debugger
						that.imgarrUrl.push( JSON.parse(uploadFileRes.data).image_url);
                        
					},
					fail: (err) => {
						uni.hideLoading()// console.log('uploadImage fail', err);
					}
				});					
			},
			//压缩图片
			compress(img){   
				console.log('开始压缩');
				let that=this
				return new Promise((res) => {
					// var localPath = plus.io.convertAbsoluteFileSystem(img);
					plus.io.resolveLocalFileSystemURL(img, (entry) => {      //通过URL参数获取目录对象或文件对象
						entry.file((file) => {       // 可通过entry对象操作图片 
							console.log('压缩前图片信息:' + JSON.stringify(file)); //压缩前图片信息
							if(file.size > 10000) {   //  504800  如果大于500Kb进行压缩
								plus.zip.compressImage({    // 5+ plus.zip.compressImage 了解一下，有详细的示例
									src: img,          //src: 压缩原始图片的路径    
									dst: img.replace('.png', '2222.png').replace('.PNG', '2222.PNG').replace('.jpg','2222.jpg').replace('.JPG','2222.JPG'),
									width: '40%',      //dst: (String 类型 )压缩转换目标图片的路径，这里先在后面原始名后面加一个2222区分一下
									height: '40%',     //width,height: (String 类型 )缩放图片的宽度,高度
									quality: 10,      //quality: (Number 类型 )压缩图片的质量
									overwrite: true,  //overwrite: (Boolean 类型 )覆盖生成新文件
									// format:'jpg'   //format: (String 类型 )压缩转换后的图片格式
								}, (event) => {
									console.log('压缩后图片信息:' + JSON.stringify(event));// 压缩后图片信息
									// this.imageInfo=event
									let newImg = event.target;
									res(newImg);  //返回新的图片地址，在uploadFile之前接收
								}, function(err) {
									// console.log('Resolve file URL failed: ' + err.message);
								});
							}else{//else小于500kb跳过压缩，直接返回现有的src
								res(img);
							}
						});
					}, (e) => { // 返回错误信息
						// console.log('Resolve file URL failed: ' + e.message);
					});
				})
			},
			
		}
	};
</script>

<style lang="scss">
	.oa-notice-detail {
		.uni-timeline {
			padding: $spacing-lg;
			background-color: $color-white;
		}

		.feedback-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;
		}

		.feedback-star-view.feedback-title {
			justify-content: flex-start;
			margin: 0;
		}

		.feedback-quick {
			position: relative;
			padding-right: 40upx;

			.iconfont {
				font-size: $font-sm;
			}
		}

		.feedback-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.feedback-textare {
			height: 200upx;
			font-size: 34upx;
			line-height: 50upx;
			width: 100%;
			box-sizing: border-box;
			padding: 20upx 30upx 0;
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 98;
			width: 100%;
			background-color: $color-white;
			color: $font-color-base;
			box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 15upx $spacing-base;

			.action-btn {
				font-size: $font-sm;
				margin: 0 0 0 15upx;
				padding: 0 $spacing-lg;
				text-align: center;
				height: 60upx;
				line-height: 60upx;
			}
		}

		.banner {
			overflow: hidden;
			position: relative;
			background-color: #ccc;

			.banner-img {
				height: 300upx;
				width: 100%;
			}

			.banner-title {
				max-height: 84upx;
				overflow: hidden;
				position: absolute;
				bottom: 0;
				width: 100%;
				font-size: 32upx;
				font-weight: 400;
				line-height: 42upx;
				color: white;
				z-index: 11;
				background-color: rgba(0, 0, 0, 0.25);
				padding: 4upx 20upx;
			}
		}

		.banner-title {
			padding: $spacing-lg $spacing-lg 0;
			font-size: $font-lg;
		}

		.article-meta {
			padding: 20upx 40upx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			color: gray;

			.article-text {
				font-size: 26upx;
				line-height: 50upx;
				margin: 0 20upx;
			}

			.article-author,
			.article-time {
				font-size: 30upx;
			}
		}

		.article-content {
			padding: 0 30upx;
			overflow: hidden;
			font-size: 30upx;
			margin-bottom: 30upx;
		}

		.input-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.input-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;
		}

		.covers-title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: $spacing-base;
			margin-top: $spacing-base;
			font-size: $font-base;

		}

		.covers-body {
			background: $color-white;
			padding: $spacing-sm $spacing-base;

			.gender-item {
				margin-right: 20upx;

				.gender-item-text {
					padding-left: 10upx;
				}

				radio .wx-radio-input.wx-radio-input-checked {
					background: $uni-color-primary;
					border-color: $uni-color-primary;
				}
			}
		}

		.covers-uploader {
			padding: 22upx 20upx;
		}
	}


	.addimgitem {
		margin-top: 20rpx;

		.title {
			color: #000000;
			line-height: 100rpx;
			font-size: 32rpx;
		}

		.addimg {
			width: 200rpx;
			height: 200rpx;
			margin-right: 22rpx;
		}

		.delimg {
			width: 50rpx;
			height: 50rpx;
			float: right;
			margin-top: -220rpx;
			margin-right: 20rpx;
		}
	}
</style>
